<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <div class="box"> </div>
    <button class="tn"> 渲染</button>
</head>

<body>






    <img src="" alt="">

    <button onclick="addrow()"></button>
    <input type="text" id="idInput" placeholder="id">
    <input type="text" id="nameInput" placeholder="name">
    <input type="text" id="priceInput" placeholder="price">







    <script>


        let data = [{
            id: 1,
            name: 'iphone',
            price: 39999
        }, {

            id: 2,
            name: 'samsung',
            price: 49999
        }, {
        }, {
            id: 3,
            name: 'dfsfd',
            price: 49999
        }, {
        }
        ]

        let inputcode = document.querySelector('input');

        let table = document.createElement('table');


        let box = document.querySelector('box');
        let btn = document.querySelector('tn');

        let thead = document.createElement('thead');
        let tr = document.createElement('tr');
        let th = document.createElement('th');
        th.textContent = 'id';
        tr.appendChild(th);
        th = document.createElement('th');
        th.textContent = 'name';
        tr.appendChild(th);
        th = document.createElement('th');
        th.textContent = 'price';
        tr.appendChild(th);
        thead.appendChild(tr);
        table.appendChild(thead);






        let tbody = document.createElement('tbody');
        data.forEach(function (item) {
            tr = document.createElement('tr');
            let td = document.createElement('td');
            td.textContent = item.id;
            tr.appendChild(td);
            td = document.createElement('td');
            td.textContent = item.name;
            tr.appendChild(td);
            td = document.createElement('td');
            td.textContent = item.price;
            tr.appendChild(td);
            tbody.appendChild(tr);





        });
        table.appendChild(tbody);

        document.body.appendChild(table);


        function addrow() {
           
            td.textContent = document.getElementById('idInput').value;
            tr.appendChild(td);
            td = document.createElement('td');
            td.textContent = document.getElementById('nameInput').value;
            tr.appendChild(td);
            td = document.createElement('td');
            td.textContent = document.getElementById('priceInput').value;
            tr.appendChild(td);
            tbody.appendChild(tr);







        }




























    </script>

</body>

</html>